<template>
  <el-container style="height: 100vh;">
    <!-- 侧边栏导航 -->
    <el-aside width="200px" style="background-color: #304156; color: white; overflow-y: auto;">
      <div class="logo" style="text-align: center; padding: 20px 0; border-bottom: 1px solid #475669;">
        <span style="color: white; font-size: 16px; font-weight: bold;">考试平台教师端</span>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <!-- 学生管理 -->
        <el-menu-item index="/studentList">
          <i class="el-icon-user"></i>
          <span slot="title">学生管理</span>
        </el-menu-item>

        <!-- 教师管理(仅管理员可见) -->
        <el-menu-item index="/teacher" v-if="isAdmin">
          <i class="el-icon-s-custom"></i>
          <span slot="title">教师管理</span>
        </el-menu-item>
        
        <!-- 试卷管理 -->
        <el-menu-item index="/exam">
          <i class="el-icon-document"></i>
          <span slot="title">试卷管理</span>
        </el-menu-item>
        
        <!-- 基础数据管理 -->
        <el-submenu index="baseData">
          <template slot="title">
            <i class="el-icon-folder"></i>
            <span>基础数据管理</span>
          </template>
          <el-menu-item index="/theory">理论知识</el-menu-item>
          <el-menu-item index="/question-bank">题库</el-menu-item>
          <el-menu-item index="/wps">焊接WPS</el-menu-item>
        </el-submenu>
        
        <!-- 课程管理 -->
        <el-menu-item index="/courses">
          <i class="el-icon-graduation-cap"></i>
          <span slot="title">课程管理</span>
        </el-menu-item>
        
        <!-- 实训管理 -->
        <el-menu-item index="/virtual-classroom">
          <i class="el-icon-video-camera"></i>
          <span slot="title">虚拟教室</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航 -->
      <el-header style="background-color: #fff; border-bottom: 1px solid #eee; padding: 0 20px;">
        <div class="header-content">
          <!-- <div class="system-title">考试平台教师端</div> -->
          <div class="user-info">
            <!-- <el-badge :value="3" class="item" type="danger">
              <el-button icon="el-icon-bell" type="text" size="mini"></el-button>
            </el-badge> -->
            <el-dropdown>
              <span class="user-dropdown">
                <img :src="userAvatar" class="user-avatar" @error="handleAvatarError">
                <span class="user-name">{{ userName }}</span>
                <i class="el-icon-caret-down"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="goToProfile">个人信息</el-dropdown-item>
                <el-dropdown-item divided @click.native="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 页面内容 -->
      <el-main style="padding: 20px; background-color: #f5f7fa;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false, // 是否为管理员
      userName: '用户', // 用户名
      userAvatar: 'https://picsum.photos/id/1005/40/40', // 默认头像
      defaultAvatar: 'https://picsum.photos/id/1005/40/40' // 默认头像URL
    };
  },
  
  mounted() {
    // 从用户信息中获取管理员标识和用户信息
    this.loadUserInfo();
    
    // 监听用户信息更新事件
    window.addEventListener('userInfoUpdated', this.loadUserInfo);
  },
  
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('userInfoUpdated', this.loadUserInfo);
  },

  methods: {
    // 加载用户信息
    loadUserInfo() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      this.isAdmin = userInfo.is_admin || false;
      this.userName = userInfo.name || userInfo.username || '用户';
      
      // 处理头像URL，确保是完整URL
      let avatar = userInfo.avatar || this.defaultAvatar;
      if (avatar && avatar !== this.defaultAvatar && !avatar.startsWith('http://') && !avatar.startsWith('https://')) {
        // 如果是相对路径，转换为完整URL
        let baseUrl = process.env.VUE_APP_BASE_API || '';
        if (baseUrl && (baseUrl.startsWith('http://') || baseUrl.startsWith('https://'))) {
          // 提取域名部分（去掉/api等路径）
          baseUrl = baseUrl.replace(/\/api.*$/, '');
        } else {
          // 使用当前页面的域名
          baseUrl = window.location.origin;
        }
        avatar = baseUrl + (avatar.startsWith('/') ? '' : '/') + avatar;
      }
      
      // 添加时间戳防止头像缓存
      this.userAvatar = avatar + (avatar.includes('?') ? '&' : '?') + '_t=' + Date.now();
    },
    
    // 头像加载失败时使用默认头像
    handleAvatarError(e) {
      e.target.src = this.defaultAvatar;
    },
    
    goToProfile() {
      // 如果当前已经在个人信息页面，不执行跳转，避免重复导航错误
      if (this.$route.name === 'Profile' || this.$route.path.endsWith('/profile')) {
        return;
      }
      this.$router.push('/profile').catch(err => {
        // 忽略重复导航错误
        if (err.name !== 'NavigationDuplicated') {
        }
      });
    },
    handleLogout() {
      localStorage.removeItem('token');
      localStorage.removeItem('userInfo');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.el-header {
  height: 60px !important;
}
.header-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.user-info {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 10px;
}
.user-name {
  color: #304156;
}
.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>